<template>
  <div>
    <el-container style="height: 1000px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: #545c64;color:#fff ">
        <div style="height: 60px;line-height: 60px">电商管理平台</div>
        <el-menu style="text-align: left;"
                 :router="true"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b">
          <template v-for="item in menuRoutes" :key="item.path">
            <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
              <template #title>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
                {{ child.name }}
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="item.path">
              <template #title>{{ item.name }}</template>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: center; font-size: 21px;background-color: #545c64;color: #fff">
          <span>电商管理平台</span>
          <!-- 退出登录按钮 -->
          <el-button
              type="text"
              style="position: absolute; right: 20px; top: 15px; color: #fff"
              @click="logoutFn"
          >
            退出登录
          </el-button>
        </el-header>
        <el-main>
          <!--嵌套路由-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, ref} from "vue";
import router from "@/router";
import {ElMessage} from "element-plus";

export default {
  name: 'IndexView',
  components: {},
  setup() {
    const axios = getCurrentInstance().appContext.config.globalProperties.$axios;
    // 从API获取菜单数据
    const menuRoutes = ref([])
    const getMenu = async () => {
      let res = await axios.get('/admin/getMenu');
      menuRoutes.value = res.data.data;
    }
    onMounted(() => {
      getMenu()
    })
    const logoutFn = () => {
      // 清除 token
      localStorage.removeItem('token');
      // 提示信息（可选）
      ElMessage.success('退出成功');
      // 跳转到登录页
      router.push('/');
    };
    return {
      logoutFn,
      menuRoutes,
      getMenu
    }
  }
};

</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
